import React, {Component} from 'react';
import './List.css';
import { Form,Input, Button, Table } from 'element-react';

class List extends Component{
    constructor (props) {
        super(props)
        this.state = {
            search: {
                user: '',
                region: ''
            },
            data: [{}],
            columns: [{
                label: "所属项目",
                prop: "proj",
                width: 180
            },
            {
                label: "接口名称",
                prop: "name",
                width: 180
            },
            {
                label: "接口地址",
                prop: "address"
            },
            {
                label: "操作",
                prop: "",
                width: 240,
                fixed: 'right',
                render: function(){
                    return (
                        <span>
                          <Button type="primary" size="small">编辑</Button>
                          <Button type="info" size="small">mock</Button>
                          <Button type="danger" size="small">删除</Button>
                        </span>
                    )
                }
            }]
        }
    }
    onSubmit(e) {
        e.preventDefault();

        console.log('submit!');
    }
    onChange(key, value) {
        this.setState({
            search: Object.assign(this.state.search, { [key]: value })
        });
    }
    render () {
        return (
            <div className="list">
                <Form inline={true} model={this.state.search} onSubmit={this.onSubmit.bind(this)} className="form-inline">
                    <Form.Item label="接口名称">
                        <Input value={this.state.search.user} placeholder="接口名称模糊搜索" onChange={this.onChange.bind(this, 'user')}></Input>
                    </Form.Item>
                    <Form.Item  label="接口地址">
                        <Input value={this.state.search.region} placeholder="接口地址模糊搜索" onChange={this.onChange.bind(this, 'region')}></Input>
                    </Form.Item>
                    <Form.Item>
                        <Button nativeType="submit" type="primary">查询</Button>
                    </Form.Item>
                </Form>
                <div className='list-content'>
                    <Table
                        style={{width: '96%'}}
                        columns={this.state.columns}
                        data={this.state.data}
                        stripe={true}
                    />
                </div>
            </div>
        )
    }
}

export default List